import React, { useEffect, useState } from 'react';

const App = () => {

  const [proList,setProList] = useState(null)
  const [count,setCount] = useState(100)


  /*
    useEffect 有两个参数第一个参数是一个回调函数，该函数会在组件挂载和组件更新时调用
    类组件是通过 componentDidMount 以及 componentDidUpdate，函数式组件是使用 useEffect 替代这俩方法
    useEffect 的第二个参数是一个依赖参数，只有依赖被改变时才会执行 useEffect
    如果我们写成 [] 就相当于不加任何依赖，那么该 useEffect 就只会执行一次
  */
  // useEffect(()=>{
  //   console.log('1234567890');
  //   fetch('http://121.89.205.189:3000/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res);
  //     // 只要有设置值，那么就相当于 proList 有改变，然后该方法就会被一直执行
  //     setProList(res.data)
  //   })
  // }, [])


  // 次 useEffect 依赖于 count,只要 count 发生改变就会立即执行一次回调函数
  // 依赖是可以是多个，添加依赖如果有多个，那么只要其中一个发生变化就会重新执行
  // 添加依赖可以实现类似 vue 中的侦听器和计算属性一样，可以监听到值的改变然后来做一些操作
  // useEffect(()=>{
  //   console.log('1234567890');
  //   fetch('http://121.89.205.189:3000/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res);
  //     // 只要有设置值，那么就相当于 proList 有改变，然后该方法就会被一直执行
  //     setProList(res.data)
  //   })
  // }, [count])


  useEffect(()=>{
    console.log('111111111111111111');

    // 在使用图表的时候，会在 清除副作用的时候移除图表
    // 如果在 effect 中有做定时器或者延迟操作，可以在清除副作用的时候移除定时器或者延迟


    return ()=>{
      // 清除副作用，用的函数
      // 取消订阅操作，销毁定时器等操作
      // 清除副作用的函数，会在下一次执行 useEffect 之前做调用
      console.log('66666666666');
    }
  }, [count])

  useEffect(()=>{
    console.log('22222222222222222222');
  }, [count])

  useEffect(()=>{
    console.log('33333333333333333333');
  }, [count])

  useEffect(()=>{
    console.log('4444444444444444444444');
  }, [count])
  return (
    <div>
      <button onClick={()=>{
        setCount(count + 1)
      }}>修改 count { count }</button>

      <ol>
        {proList && proList.map(item => (<li key={item.proid}>{item.proname}</li>))}
      </ol>
    </div>
  );
};

export default App;
